<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
    String path = request.getContextPath();
    String basePath = path + "/common/web/zmxy";
%>
<c:set var="path" value="<%=path%>"></c:set>
<c:set var="basePath" value="<%=basePath%>"></c:set>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>还款方式</title>
    <meta http-equiv="Expires" content="-1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="${basePath}/css/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" type="text/css" href="${basePath}/css/basic.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}/css/common.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}/css/theme-orange.css" />

    <script type="text/javascript" src="${basePath}/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="${basePath}/js/base.js"></script>
    <script type="text/javascript" src="${basePath}/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/global-1.1.0.min.js"></script>
    <script type="text/javascript" src="${basePath }/js/jquery.mobile-1.4.2.min.js"></script>
</head>
<body style="background:#fff;">
<div class="ui-page ui-page-theme-a ui-page-active" data-role="page" style="background:#fff;" id="page1">
   <%-- <div class="header">
        <a class="back_arr" href="${path}/repayment/detail.do?id=${bo.id}" data-ajax="false"></a>
        <h1>请选择还款方式</h1>
    </div>--%>
    <!-- main start -->
    <div class="wrapper">
        <div class="apply">
            <h2>请选择还款方式</h2>
            <ul class="zl_info tk_new">
               <%--<li id="mima-btn_1">
                    <a rel="external" href="javascript:;">
                        <span><img src="${basePath}/images/b_01.png" alt="">一键还款</span>
                        <p>&lt;%&ndash; <em>${info.bankName}（${info.card_no}）</em> &ndash;%&gt;<img src="${basePath}/images/el_06.png" alt=""></p>
                    </a>
                </li>--%>
                <li id="mima-btn">
                    <a rel="external" href="javascript:;">
                        <span>
                        <img src="${basePath}/images/record.png" alt="" style="float:left;margin-top:10px">
                        <span style="float:left;width:4rem">银行卡支付</span>
                        </span>
                        <p><em>${info.bankName}（${info.card_no}）</em><img src="${basePath}/images/el_06.png" alt=""></p>
                    </a>
                </li>
            </ul>
            <div class="tip">
                <p>备注：若在借款期间内未主动发起还款，则默认于还款日当天从绑定银行卡${info.bankName}（${info.card_no}）自动扣除所借款项，请保证在扣款之前账户资金充足。</p>
            </div>
            <%-- <ul class="zl_info tk_new">
            	<li class="mima-btn">
                    <a rel="external" href="${path}/repayment/repay-type-sao?id=${bo.id}&userId=${bo.userId}">
                        <span><img src="${basePath}/images/code.png" alt=""  style="float:left;margin-top:10px">扫码支付</span>
                        <p><img src="${basePath}/images/el_06.png" alt=""></p>
                    </a>
                </li>
            </ul>
            <div class="tip">
               <p>备注：支持支付宝、微信还款</p><p>(1)自己还款：截图保存至本地相册，打开支付宝扫一扫通过选择本地相册的二维码图片进行还款；(2)他人代还：截图转发给他人，由他人通过支付宝/微信扫码代还。</p>
            </div> --%>
        </div>
    </div>
    <!-- main end -->
</div>
<div class="popup" id="defray" style="display:none">
    <div class="overlay"></div>
    <div class="dialog">
        <span class="close"></span>
        <h2>还款总额</h2><h1><fmt:formatNumber pattern='###,###,##0.00' value="${(repayment.repaymentAmount - repayment.repaymentedAmount) / 100.00}"/>元</h1>
        <p class="clearfix">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </p>
        <p class="error-tips" id="error_tip"></p>
        <input name="" type="number" value="" pattern="\d*"/>
    </div>
</div>

<div class="popup" id="defray_withhold" style="display:none">
    <div class="overlay"></div>
    <div class="dialog">
        <span class="close"></span>
        <h2>还款总额</h2><h1><fmt:formatNumber pattern='###,###,##0.00' value="${(repayment.repaymentAmount - repayment.repaymentedAmount) / 100.00}"/>元</h1>
        <p class="clearfix">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
    </p>
        <p class="error-tips" id="error_tip_withhold"></p>
        <input name="" type="number" value="" pattern="\d*"/>
    </div>
</div>

<div class="popup" id="loading" style="display: none;">
    <div class="overlay">
        <p class="tips-msg">正在提交，请稍后…</p>
    </div>
    <div class="spin" id="preview">
    </div>
</div>
<div class="ui-page ui-page-theme-a ui-page-active" data-role="page"  style="background:#fff;display: none;" id="page2">
   <%-- <div class="header">
        <a class="back_arr" href="${path}/repayment/detail.do?id=${bo.id}" data-ajax="false"></a>
        <h1>申请还款</h1>
    </div>--%>
    <!-- main start -->
    <div class="wrapper">
        <div class="tj-loading">
            <img src="${basePath}/images/b_05.png" alt="">
        </div>

    </div>
    <!-- main end -->
</div>
<div class="ui-page ui-page-theme-a ui-page-active" data-role="page"  style="background:#fff;display: none;" id="page3">
    <%--<div class="header">
        <a class="back_arr" href="${path}/repayment/detail.do?id=${bo.id}" data-ajax="false"></a>
        <h1>申请还款</h1>
    </div>--%>
    <!-- main start -->
    <div class="wrapper">
        <div class="repayment-result">
            <img src="${basePath}/images/b_03.png" alt="">
            <p>恭喜还款成功！</p>
        </div>

    </div>
    <!-- main end -->

</div>
<div class="ui-page ui-page-theme-a ui-page-active" data-role="page"  style="background:#fff;display: none;" id="page4">
  <%--  <div class="header">
        <a class="back_arr" href="${path}/repayment/detail.do?id=${bo.id}" data-ajax="false"></a>
        <h1>申请还款</h1>
    </div>--%>
    <!-- main start -->
    <div class="wrapper">
        <div class="repayment-result">
            <img src="${basePath}/images/b_03.png" alt="">
            <p>还款失败~</p>
            <span>试试其他还款方式吧</span>
        </div>

    </div>
    <!-- main end -->
</div>
<form action="" method="post"  id="payPath" style="display: none;">
    <input type="text" name="VERSION" id="VERSION">
    <input type="text" name="MCHNTCD" id="MCHNTCD">
    <input type="text" name="FM" id="FM">
    <input type="text" name="ENCTP" id="ENCTP">
</form>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        var $page1 = $("#page1");
        var $page2 = $("#page2");
        var $page3 = $("#page3");
        var $page4 = $("#page4");

        //密码弹窗
        $('#mima-btn').click(function(event) {
            $('#defray').show();
            $('#defray i').removeClass('point');
            $('#defray input').val('').focus();
            $('#error_tip').html('');
        });
        
        //连连密码弹窗
        $('#mima-btn_1').click(function(event) {
            $('#defray_withhold').show();
            $('#defray_withhold i').removeClass('point');
            $('#defray_withhold input').val('').focus();
            $('#error_tip_withhold').html('');
        });
        

        $('#defray .close').click(function(event){
            $('#defray').hide();
        });

        $('#defray_withhold .close').click(function(event){
            $('#defray_withhold').hide();
        });
        
        $('#defray p').click(function(event){
            $('#defray input').focus();
        });
        
        $('#defray_withhold p').click(function(event){
            $('#defray_withhold input').focus();
        });

        $('#defray input').focus(function(){
            var interval = setInterval(function(){
                if(document.activeElement.nodeName == 'INPUT'){
                    $('#defray .dialog').css({top:0,marginTop:0});
                }else{
                    $('#defray .dialog').attr('style','');
                    if (interval) {
                        clearInterval(interval);
                        interval = null;
                    }
                }
            },500);
        });
        
        $('#defray_withhold input').focus(function(){
            var interval = setInterval(function(){
                if(document.activeElement.nodeName == 'INPUT'){
                    $('#defray_withhold .dialog').css({top:0,marginTop:0});
                }else{
                    $('#defray_withhold .dialog').attr('style','');
                    if (interval) {
                        clearInterval(interval);
                        interval = null;
                    }
                }
            },500);
        });


        $('#defray input').bind('input',function(event){
            var input = $(this);
            var val = input.val();
            $('#defray i').removeClass('point');
            for(var i = 0; i < val.length; i++){
                $('#defray i').eq(i).addClass('point');
            }
            if (val.length >= 6){
                $('#loading').show();
                input.val(val.slice(0,6));
                var url = '${path}/repayment/repay-bank-card';
                $.post(url, {id:'${bo.id}',payPwd:input.val()} , function(data){
                    input.val("");
                    $('#loading').hide();
                    if(data.successed){
                        /*$page3.show();
                        $('#defray').hide();
                        $page2.hide();*/
                        $('#defray').hide();
                        $("#payPath").attr("action", data.paramsMap.payPath);
                        $("#VERSION").val(data.paramsMap.VERSION);
                        $("#MCHNTCD").val(data.paramsMap.MCHNTCD);
                        $("#FM").val(data.paramsMap.FM);
                        $("#ENCTP").val(data.paramsMap.ENCTP);
                        showLoader(data.msg);
                        //$("#payPath").submit();
                    }
                    else if(data.code == "-103"){
                        $('#error_tip').html(data.msg);
                    }
                    else{
                        $('#defray').hide();
                        showLoader(data.msg);
                    }
//                    $page2.hide();
                    $('#defray i').removeClass('point');
                });
            }
        });
        
        $('#defray_withhold input').bind('input',function(event){
            var input = $(this);
            var val = input.val();
            $('#defray_withhold i').removeClass('point');
            for(var i = 0; i < val.length; i++){
                $('#defray_withhold i').eq(i).addClass('point');
            }
            if (val.length >= 6){
                $('#loading').show();
                input.val(val.slice(0,6));
                var url = '${path}/repayment/repay-withhold';
                $.post(url, {id:'${bo.id}',payPwd:input.val()} , function(data){
                    input.val("");
                    $('#loading').hide();
                    $('#error_tip_withhold').html(data.msg);
                    if(data.code == "-103"){
                        $('#error_tip_withhold').html(data.msg);
                    }
                    else{
                        $('#defray_withhold').hide();
                        showLoader(data.msg);
                    }
//                    $page2.hide();
                    $('#defray_withhold i').removeClass('point');
                });
            }
        })
    });
</script>
</body>
</html>